<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">
      <div class="search-row m-form">
        <el-date-picker
          v-model="yearMonth"
          type="month" value-format="yyyy-MM" class="label-sel w-150">
        </el-date-picker>

        <label class="label-text">扣缴义务人:</label>
        <div class="label-sel w-280">
          <el-select v-model="obligorIds" filterable class="w-p100" placeholder="请选择扣缴义务人" multiple collapse-tags
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>

        <el-button type="primary" class="ml-20" icon="el-icon-search" @click="getTableData">查询</el-button>

        <div class="search-row-btn">
          <el-button type="primary" class="opt-btn yellow-btn" icon="icon ic-export">导出</el-button>
        </div>
      </div>

      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight">
      <el-table-column type="selection" fixed="left" align="center" width="55"></el-table-column>
      <el-table-column prop="obligorName" label="扣缴义务人" width="300" header-align="center" align="left"></el-table-column>
      <el-table-column prop="yearDate" label="所属税期" width="220" header-align="center" align="center" :formatter="formatDateFun"></el-table-column>
      <el-table-column prop="itemName" label="所得项目" header-align="center" align="left"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <router-link :to="'/taxReportDetail?withholdingAgent='+ scope.row.obligorName + '&salaryPlatformBillNumber='+ scope.row.salaryPlatformBillNumber">
            <el-button size="small" type="text" icon="el-icon-view" class="btn">查看</el-button>
          </router-link>
          <el-button type="text" size="small" class="btn ml-20" icon="el-icon-upload2" @click="reportData(scope.row)">
            导出
          </el-button>
        </template>
      </el-table-column>
    </dTable>
    </div>
  </div>
</template>
<script>
  import dTable from '../../../components/common/table'

  export default {
    components: { dTable },
    data () {
      return {
        // 导航
        pathData: [
          { name: '薪税管理' },
          { name: '个税报表', path: '/taxReport' }
        ],
        options: [],
        obligorIds: [],
        yearMonth:this.$global.getNowDate('yyyy-MM')
      }
    },
    created () {
      this.getSelectOption()
      this.$nextTick(() => {
         this.getTableData()
      })
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 210 + 'px'
      }
    },
    methods: {
      getSelectOption(){
        this.$http({
          url:'/company/withholdingAgent/page',
          method: 'get',
          params: {}
        }).then(({data}) => {
          this.options = data.rows;
        })
      },
      formatDateFun (row, column, cellValue, index) {
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue,'yyyy-MM')
      },
      getTableData (params = []) {
        params = [{ property: 'yearDate', value: this.yearMonth }, { property: 'obligorId', value: this.obligorIds }]
        this.$refs.empTable.fetch(params, 'post', '/salary/accounting/pagePersonalIncomeTax')
      },
      reportData(row){
//        post /api/salary/accounting/personalIncomeTaxDetail
        var requestParams = this.$refs.empTable.requestParams
        this.$downloadFile('/salary/accounting/personalIncomeTaxExport', 'post', {},this.$global.EXCEL)
      }
    }
  }
</script>
<style lang="less" scoped>
  .emp-container {
    padding: 20px;
    position: relative;
    height: 100%;
  }
</style>
